import React, { useState } from 'react'
import avatarImg from '@/static/images/avatar_24x24.png'

interface AvatarProps {
	portrait?: string
}

export default function Avatar({ portrait }: AvatarProps) {
	const parsePortrait = (portrait: string | undefined): string => {
		if (!portrait) return avatarImg
		if (portrait.indexOf('/images/avatar')) {
			return avatarImg
		}
		return portrait
	}

	const [imgSrc, setImgSrc] = useState<string>(parsePortrait(portrait))

	const onError = () => {
		if (imgSrc.indexOf('/static/images/avatar_24x24.png')) return
		setImgSrc(avatarImg)
	}

	return (
		<div>
			<img src={imgSrc} alt="" onError={onError} />
		</div>
	)
}
